<template>
  <div class="box">
            <ShouHua/>

    <div class="boxbx">
        <div class="biaotou">
        </div>
        <div class="biaoti">
            <span> <van-icon name="shop-o" /> 遇见花店气球派对 </span> 
        </div>
        <div class="baokuan">
            <p>爆款【轻奢款】向阳而生||向日葵混搭花束</p>
        </div>
        <div class="suishi">
            <div class="suishizi">
            <span> <van-icon name="passed" /> 随时退</span>
            <span> <van-icon name="passed" /> 过期退</span> 
            <span> <van-icon name="passed" /> 需预约</span> 
            <span>?</span>
            </div>
            <div>
                <span>已售3414</span>
            </div>
        </div>
        <div class="tupian">
            <img src="yangchao/imgs/1.1.jpg" alt="">
        </div>
        <div class="yishou">
            <div class="yishouzi"> 
                <span> <van-icon name="passed" /> 随时退 </span> 
                <span> <van-icon name="passed" /> 过期退</span> 
            </div>
            <div>
                <span> <van-icon name="passed" />已售3414</span>
            </div>
        </div>
        <div class="youhui">
            <div>
                <span>优惠 </span>
                &nbsp 
                <span class="quan"> 券 </span> 
                &nbsp 
                <span class="manjian"> 满150减10券  </span>
                &nbsp 
                <span class="manjian"> 满150减15券 </span>
            </div>
            <span>去领券 <van-icon name="arrow" /></span>
        </div>
        <div class="mendian">
            <p>适用门店 <span>(5)</span> </p>
            <p><van-icon name="arrow" /></p>
        </div>
        <div class="big">
            <div class="zhong">
                <h4>遇见花店气球派对 高新店</h4>
                <br>
                <div class="boxtan">
                    <div class="images">
                        <span><van-icon name="star" /> </span>
                        <span> <van-icon name="star" /> </span>
                        <span><van-icon name="star" /></span>
                        <span><van-icon name="star" /></span>
                        <span><van-icon name="star" /></span>
                    </div>
                    <p>距您>100km</p>
                </div>
            </div>
            
            <div class="small">
                <span><van-icon name="chat-o" /></span>
                &nbsp
                <span><van-icon name="phone-o" /></span>
            </div>
        </div>
        <div class="address">
            <p>高新二路与科技路交汇处亚美大厦</p>
            <p><van-icon name="arrow" /></p>
        </div>
        <div class="fengge">

        </div>
        <div class="tuwen">
            <p>图文详情<van-icon name="comment" /></p>
            <p>更多图文详情 <van-icon name="arrow" /></p>
        </div>
        <div class="fengge">

        </div>
        <div class="xuzhi">
            <p>购买须知<van-icon name="volume" /></p>
        </div>
        <div class="xiaoqi">
            <p>有效期</p>
            <span>·2021-07-09至2023-06-27</span>
            <p>除外日期</p>
            <span>·元旦、春节、劳动节、端午节、国庆节、清明节、中秋节、情人节、圣诞节不可用</span>
            <p>预约信息</p>
            <span>·请您提前3小时预约</span>
            <p>规则提醒</p>
            <span>·需到店自提</span>
            <span>·不再与其他优惠同享</span>
            <p>温馨提示</p>
            <span>·如需团购券发票，请您在消费时向商户咨询</span>
            <span>·为了保障您的权益，建议使用美团、点评网线上支付。若使用其他支付方式导致纠纷，美团、点评网不承担任何责任，感谢您的理解和支持！</span>
            <span>·若您选择配送上门，购买流程如下：用户订购→用户付款→商户接单→订单服务，若商户拒单或2小时内未接单的，订单将被自动取消并自动退款。</span>
            <span>·若您直接购买团购券或选择自提后希望改为配送上门，请及时联系商户。</span>
            
        </div>
        <br>
        <div>
            <p >精选评论(162)</p>
        </div>
        
        <div class="zujian">
            <YccPin/>
        </div>
        <div class="bigbox">
            <div class="left">
                <p>
                    ￥
                </p>
                <span>188</span>
            </div>
            <div class="right" @click="fun()">
                立即抢购 <GouMai/>
            </div>
        </div>
        <div class="dibu">


        </div>
    </div>
  </div>
</template>

<script>
import ShouHua from "../../components/yangchao/ShouHua copy.vue"
import YccPin from "../../components/yangchao/YccPin.vue"
import GouMai from "../../components/yangchao/GouMai.vue"
export default {
    components:{
        ShouHua,YccPin,GouMai
    },
    methods:{
        fun(){
            this.$router.push("/threeye")
        },
        
    }
}
</script>

<style scoped lang="scss">
.box{
    width: 100vw;
    .boxbx{
        width: 93.334vw;
        margin: auto;
        .biaotou{
            width: 93.334vw;
            // height: 8vw;
            line-height: 8vw;
            display: flex;
            justify-content: space-between;
        }
        .biaoti{
            height: 8vw;
            line-height: 8vw;
            font-size: 3.467vw;
            // color: #999;
        }
        .baokuan{
            height: 8vw;
            line-height: 8vw;
            font-size: 4.8vw;
        }
        .suishi{
            display: flex;
            justify-content: space-between;
            font-size: 3.467vw;
            .suishizi{
                height: 8vw;
                line-height: 8vw;
            }
        }
        .tupian{
            img{
                border-radius: 4vw;
                width: 93.334vw;;
                height: 53.333vw;
            }
        }
        .yishou{
            height: 8vw;
            line-height: 8vw;
            display: flex;
            justify-content: space-between;
            font-size: 3.733vw;
            border-bottom: 0.133vw solid #999;
            .yishouzi{
                color: green;
            }
        }
        .youhui{
            display: flex;
            justify-content: space-between;
            font-size: 3.733vw;
            margin-top: 2.667vw;
            margin-bottom: 4vw;
            .quan{
                background-color: #f63;
                color: white;
            }
            .manjian{
                border: 0.267vw solid #f63;
                color: #f63;
            }
        }
        .mendian{
            display: flex;
            justify-content: space-between;
            margin-bottom: 2.667vw;
        }
        .big{
            width: 94.667vw;
            display: flex;
            justify-content: space-between;
            border-bottom: 0.267vw solid #999;
            .small{
                height: 15.147vw;
                line-height: 15.147vw;
                color: #f63;
                font-size: 5.333vw;
            }
            .zhong{
                width: 74.667vw;
            }
            .boxtan{
                width: 74.667vw;
                height: 10.667vw;
                display: flex;
                justify-content: space-between;
                .images{
                    span{
                        width: 2.667vw;
                        height: 2.667vw;
                        color: white;
                        border: 0.267vw solid #f63;
                        font-size: 5.333vw;
                        background-color: #f63;
                    }
                }
            }
        }
        .address{
            width: 94.667vw;
            height: 10.667vw;
            line-height: 10.667vw;
            display: flex;
            justify-content: space-between;
        }
        .fengge{
            width: 100vw;
            height: 2.667vw;
            background-color: #eee;
            margin-left: -3.467vw;
        }
        .tuwen{
            width: 94.667vw;
            height: 10.667vw;
            line-height: 10.667vw;
            display: flex;
            justify-content: space-between;
            font-size: 3.733vw;
            border-bottom: 0.267vw solid #999;
            .van-icon-comment:before{
                color: #999;
            }
        }
        .xuzhi{
            width: 94.667vw;
            height: 10.667vw;
            line-height: 10.667vw;
        }
        .xiaoqi{
            p{
                font-size: 3.2vw;
                color: #999;
            }
            span{
                font-size: 3.2vw;
            }
        }
        .zujian{
            margin-top: -29.333vw;
        }
        .bigbox{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 16vw;
            line-height: 16vw;
            border-top: 0.267vw solid #999;
            display: flex;
            justify-content: space-between;
            font-size: 8vw;
            background-color: white;
                        color: #f63;

            .left{
                display: flex;
                justify-content: space-between;
                p{
                    font-size: 3.733vw;
                    color: black;
                }
                .span{
                        font-size: 8vw;
                    }
            }
            .right{
                width: 24vw;
                height: 10.667vw;
                font-size: 4.267vw;
                text-align: center;
                background-color: #f63;
                line-height: 10.667vw;
                margin-top: 2.667vw;
                color: white;
            }
        }
        .dibu{
            height: 18.667vw;
        }
    }
}

</style>